Jejak pengalaman belajar dan sharing IT saya, semua tertuang disini.

Login Member

Materi Mata Kuliah

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

03 jam 10 menit 00 detik

02 jam 10 menit 00 detik

02 jam 09 menit 00 detik

02 jam 01 menit 00 detik

00 jam 50 menit 00 detik

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 38 menit 00 detik

00 jam 10 menit 00 detik

00 jam 50 menit 00 detik

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

Manipulasi DOM dengan jQuery

Manipulasi DOM dengan jQuery adalah proses mengubah isi, struktur, dan tampilan elemen HTML dengan cara yang lebih mudah dan singkat dibandingkan JavaScript biasa.

Dengan jQuery, kita dapat:

  • Mengubah teks dan HTML
  • Menambah elemen baru
  • Menghapus elemen
  • Mengubah style (CSS)

1. Mengubah Teks

Menggunakan .text()

 
$("#judul").text("Judul Baru");
 

👉 Mengubah isi teks tanpa membaca HTML.

2. Mengubah HTML

Menggunakan .html()

 
$("#judul").html("<b>Judul Baru</b>");
 

👉 Bisa menambahkan tag HTML.

3. Mengubah CSS

Menggunakan .css()

 
$("#judul").css("color", "red");
 

👉 Bisa juga lebih dari satu:

 
$("#judul").css({
"color": "blue",
"font-size": "20px"
});
 

4. Menambah Elemen

a. append() → menambah di dalam (akhir)

 
$("#konten").append("<p>Paragraf baru</p>");
 

b. prepend() → menambah di awal

 
$("#konten").prepend("<p>Paragraf di atas</p>");
 

c. after() → setelah elemen

 
$("#judul").after("<p>Setelah judul</p>");
 

d. before() → sebelum elemen

 
$("#judul").before("<p>Sebelum judul</p>");
 

5. Menghapus Elemen

a. remove() → hapus elemen

 
$("#hapus").remove();
 

b. empty() → hapus isi elemen

 
$("#konten").empty();
 

6. Mengubah Atribut

 
$("#gambar").attr("src", "gambar2.jpg");
 

7. Contoh Program Sederhana

 
<!DOCTYPE html>
<html>
<head>
<title>Manipulasi jQuery</title>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<h1 id="judul">Judul Lama</h1>
<button id="btn">Ubah Judul</button>

<script>
$(function() {
$("#btn").click(function() {
$("#judul").text("Judul Baru dengan jQuery");
$("#judul").css("color", "blue");
});
});
</script>

</body>
</html>
 

8. Contoh Tambah Elemen

 
<button id="tambah">Tambah Paragraf</button>
<div id="konten"></div>

<script>
$(function() {
$("#tambah").click(function() {
$("#konten").append("<p>Paragraf baru ditambahkan</p>");
});
});
</script>
 

Kesalahan Umum

  1. Salah selector (#, ., tag)
  2. Tidak menunggu document ready
  3. Salah penggunaan .text() dan .html()
  4. Menambahkan elemen tanpa struktur yang jelas

Kesimpulan

Manipulasi DOM dengan jQuery mempermudah developer dalam mengubah tampilan dan struktur halaman web dengan sintaks yang lebih sederhana. Dengan memahami cara mengubah teks, HTML, CSS, serta menambah dan menghapus elemen, mahasiswa dapat membuat website yang lebih dinamis dan interaktif. Materi ini menjadi dasar penting sebelum mempelajari efek dan animasi pada jQuery.

Report Error